<template>
  <div>
    <div class="flyray-top flyray-top-left">
      <!-- 筛选条件 -->
      <div class="task_search">
        <el-input v-model="searchForm.taskId" style="width:150px"></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          style="margin-bottom:2%"
          @click="search"
        >搜索</el-button>
        <el-button icon="el-icon-delete" size="small" style="margin-left:10px" @click="clearform">清空</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          style="margin-bottom:2%"
          @click="addTaskClick"
        >新增</el-button>
      </div>
    </div>
    <div class="mainMsgPadding_Pro box main">
      <!-- 任务列表 -->
      <el-table
        v-loading="tableLoading"
        :border="true"
        :data="tableData"
        :header-cell-style="{background:'rgb(250, 250, 250)',color: 'rgba(0,0,0,.85)'}"
        stripe
        style="width: 100%;margin-bottom:20px;"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          show-overflow-tooltip
          align="center"
          background="#000"
        >
          <template slot-scope="scope">
            <span>{{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="事件名称" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="code" label="事件编码" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="reward" label="事件奖励值" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="validPeriod" label="有效事件" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="事件状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{scope.row.status|status}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
          :border="true"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              size="small"
              type="text"
              @click="detailsClick(scope.row)"
            >详情</el-button>
            <el-button icon="el-icon-edit" size="small" type="text" @click="editClick(scope.row)">编辑</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="delClick(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页底部 -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="page.currentPage"
        :page-size="page.pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="page.total"
      ></el-pagination>
    </div>
    <!-- 0 新增/1 详情 / 2编辑 -->
    <a-modal
      v-model="dialogVisible"
      :title="dialogName==0?'新增':dialogName==1?'详情':'编辑'"
      :width="screen ==3 ?'50%':'70%'"
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12">
            <el-form-item label="事件名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="事件编码" :label-width="formLabelWidth">
              <el-input v-model="form.code" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="事件奖励值" :label-width="formLabelWidth">
              <el-input v-model="form.reward" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="有效时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="form.validPeriod"
                type="datetime"
                placeholder="选择有效时间"
                align="right"
                style="width:100%"
                :disabled="dialogName==1"
                value-format="yyyy-MM-dd hh:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="事件状态" :label-width="formLabelWidth">
              <el-select
                v-model="form.status"
                placeholder="请选择事件状态"
                style="width:100%"
                :disabled="dialogName==1"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave('form')" v-if="dialogName==0">保 存</el-button>
        <el-button type="primary" @click="handleupDate('form')" v-if="dialogName==2">修 改</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import top from "@/components/top/";
import { mapGetters } from "vuex";
import { fetchList, addObj, delObj, putObj } from "@/api/org/event";

export default {
  name: "project",
  computed: {
    ...mapGetters(["screen"])
  },
  components: {
    top
  },
  data() {
    return {
      tableLoading: false,
      dialogVisible: false,
      dialogName: 0,
      formLabelWidth: "120px",
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      form: {},
      searchForm: {},
      tableData: [],
      statusList: [
        {
          value: 1,
          label: "开始"
        },
        {
          value: 2,
          label: "待开始"
        }
      ],
      rules: {
        name: [{ required: true, message: "请填写事件名称", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList(this.page);
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList(this.page);
    },
    handleSizeChange(sizePage) {
      this.page.pageSize = sizePage;
      this.getList(this.page);
    },
    search() {},
    // 新增
    addTaskClick() {
      this.form = {};
      this.dialogVisible = true;
      this.dialogName = 0;
    },
    // 详情
    detailsClick(row) {
      this.form = {};
      this.dialogVisible = true;
      this.dialogName = 1;
      this.form = row;
    },
    // 编辑
    editClick(row) {
      this.form = {};
      this.dialogVisible = true;
      this.dialogName = 2;
      this.form = row;
    },
    // 删除
    delClick(row) {
      this.$confirm(
        "此操作将组织机构名为“ " + row.name + " ”数据删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          delObj(row.id).then(res => {
            this.getList(this.page);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 清空
    clearform() {},
    // 新增保存
    handleSave(form) {
      this.form.orgId = this.$store.getters.userInfo.ecoUserNo;
      this.$refs[form].validate(valid => {
        if (valid) {
          addObj(this.form)
            .then(res => {
              this.page.currentPage = 1;
              this.getList(this.page);
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "新增失败"
              });
            });
        } else {
          return false;
        }
      });
    },
    // 修改提交
    handleupDate(form) {
      this.form.orgId = this.$store.getters.userInfo.ecoUserNo;
      this.$refs[form].validate(valid => {
        if (valid) {
          putObj(this.form)
            .then(res => {
              this.getList(this.page);
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "修改失败"
              });
            });
        } else {
          return false;
        }
      });
    }
  },
  filters: {
    status: data => {
      switch (data) {
        case 1:
          return "待分配";
        case 2:
          return "待开始";
        case 3:
          return "进行中";
        case 5:
          return "已取消";
        case 6:
          return "已完成";
        default:
      }
    }
  }
};
</script>
<style scoped>
</style>
